<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1">
        <meta name="description" content="Metro UI CSS">
        <meta name="author" content="Sergey Pimenov">
        <meta name="keywords" content="windows 8, modern style, Metro UI, style, modern, css, framework">

        <link href="css/modern.css" rel="stylesheet">
        <link href="css/modern-responsive.css" rel="stylesheet">
        <link href="css/site.css" rel="stylesheet" type="text/css">
        <link href="js/google-code-prettify/prettify.css" rel="stylesheet" type="text/css">

        <script type="text/javascript" src="js/assets/jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="js/assets/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" src="js/assets/moment.js"></script>
        <script type="text/javascript" src="js/assets/moment_langs.js"></script>

        <script type="text/javascript" src="js/modern/dropdown.js"></script>
        <script type="text/javascript" src="js/modern/accordion.js"></script>
        <script type="text/javascript" src="js/modern/buttonset.js"></script>
        <script type="text/javascript" src="js/modern/carousel.js"></script>
        <script type="text/javascript" src="js/modern/input-control.js"></script>
        <script type="text/javascript" src="js/modern/pagecontrol.js"></script>
        <script type="text/javascript" src="js/modern/rating.js"></script>
        <script type="text/javascript" src="js/modern/slider.js"></script>
        <script type="text/javascript" src="js/modern/tile-slider.js"></script>
        <script type="text/javascript" src="js/modern/tile-drag.js"></script>
        <script type="text/javascript" src="js/modern/calendar.js"></script>
         
        <title>Metro UI CSS</title>
    </head>
    <body class="metrouicss" onload="prettyPrint()">

  
        <div class="page secondary">



            <div class="page-region">
                <div class="page-region-content">
                    <table id="1" >
                        <tr>
                            <th>Select</th>
                            <th>Name</th>
                            <th>Email ID</th>
                            <th>Activated</th>
                        </tr>
                        <tr>

                        </tr>   
                    </table>
                    <button id="staticDialog">Delete Moderator</button>
                    <button id="staticDialog" onclick="visible();">Add Moderator</button>
                    <div id="hider">
                    <table id="addnew" >
                        <tr>

                            <td>Name</td>
                            <td><input id="name" type ="text" /></td>
                        </tr>
                        <tr>
                            <td>Email ID</td>
                            <td><input id ="email" type ="text" /></td>   
                        </tr>

                    </table>
                    
                    <button name="save" id="staticDialog">Save</button>
                    </div>
                </div>            
                <!--button id="setupDialog">Setup dialog</button-->
                <script type="text/javascript" src="js/modern/dialog.js"></script>
                <script type="text/javascript" >
            //alert(document.getElementById("addnew"));
            
            document.getElementsByName("save")[0].style.visibility= "hidden";
            document.getElementById("name").style.visibility="hidden";
            document.getElementById("hider").style.visibility="hidden";
            
            function visible()
            {  
                document.getElementsByName("save")[0].style.visibility= "visible";
            document.getElementById("name").style.visibility="visible";
            document.getElementById("hider").style.visibility="visible";
             
            }
        </script>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $('#staticDialog').click(function(e) {
                            var i=document.getElementById("t").value;
                            if(i=="")
                            {
                                $.Dialog({
                                    'title'      : 'My static dialog',
                                    'content'    : 'This kand can be in HTML.<br />You can add custom function to your buttons!<br /><br /><b>Features:</b><ul><li>Easy to use!</li><li>Customizable</li><li>Powerful!</li></ul>',
                                    'buttons'    : {
                                        'Ok'    : {
                                            'action': function() {}
                                        },
                                        'Cancel'     : {
                                            'action': function() {}
                                        }
                                    }
                                });
                                return false;   
                            }
                        }); 
                    });
                </script>

                <script type="text/javascript" src="js/assets/github.info.js"></script>
                <script type="text/javascript" src="js/assets/google-analytics.js"></script>
                <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
                <script src="js/sharrre/jquery.sharrre-1.3.4.min.js"></script>

                <script>
                    $('#shareme').sharrre({
                        share: {
                            googlePlus: true
                            ,facebook: true
                            ,twitter: true
                            ,delicious: true
                        },
                        urlCurl: "js/sharrre/sharrre.php",
                        buttons: {
                            googlePlus: {size: 'tall'},
                            facebook: {layout: 'box_count'},
                            twitter: {count: 'vertical'},
                            delicious: {size: 'tall'}
                        },
                        hover: function(api, options){
                            $(api.element).find('.buttons').show();
                        }
                    });
                </script>

                </body>
                </html>